<template>
    <div class="app-container">
        <div>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编码规则方案
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="餐厅名" value="1"></el-option>
                <el-option label="订单号" value="2"></el-option>
                <el-option label="用户电话" value="3"></el-option>
            </el-select>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="primary" @click="dialogVisible = true">新增</el-button>
        </div><br>
        <template>
            <el-table
                    :data="tableData"
                    row-key="id"
                    style="width: 100%"
                    border
            >
                <el-table-column
                        v-for="(item, index) in col"
                        :key="`col_${index}`"
                        :prop="dropCol[index].prop"
                        :label="item.label"
                />
                <el-table-column
                        prop="orderNum"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="moveUp(scope.$index,scope.row)">上移</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button type="text" @click="moveDown(scope.$index,scope.row)">下移</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <template>
                                <el-button type="text" slot="reference">删除</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </template>

    </div>
</template>

<script>
    import Sortable from 'sortablejs'
    export default {
        name: 'DragTable',
        data() {
            return {
                col: [
                    {
                        label: '顺序编号',
                        prop: 'SequenceNumber'
                    },
                    {
                        label: 'AI',
                        prop: 'AiCode'
                    },
                    {
                        label: '数据名称',
                        prop: 'DataName'
                    },
                    {
                        label: '格式',
                        prop: 'Format'
                    },
                    {
                        label: '含义',
                        prop: 'Implication'
                    }
                ],
                dropCol: [
                    {
                        label: '顺序编号',
                        prop: 'SequenceNumber'
                    },
                    {
                        label: 'AI',
                        prop: 'AiCode'
                    },
                    {
                        label: '数据名称',
                        prop: 'DataName'
                    },
                    {
                        label: '格式',
                        prop: 'Format'
                    },
                    {
                        label: '含义',
                        prop: 'Implication'
                    }
                ],
                tableData: [{
                    SequenceNumber: '1',
                    AiCode: 'MF',
                    DataName: '阿里健康码上放心码',
                    Format: 'n2+n13',
                    Implication:'AHM规则库中的管理码'
                }, {
                    SequenceNumber: '2',
                    AiCode: 'BA',
                    DataName: '生产批号',
                    Format: 'n2+an...10',
                    Implication:'生产批号'
                }, {
                    SequenceNumber: '3',
                    AiCode: 'MD',
                    DataName: '生产日期',
                    Format: 'n2+m6',
                    Implication:'生产日期'
                }, {
                    SequenceNumber: '4',
                    AiCode: 'ED',
                    DataName: '有效日期',
                    Format: 'n2+m6',
                    Implication:'截止有效期'
                }]
            }
        },
        mounted() {
            // 阻止默认行为
            document.body.ondrop = function(event) {
                event.preventDefault()
                event.stopPropagation()
            }
            this.rowDrop()
            this.columnDrop()
        },
        methods: {
            //行拖拽
            rowDrop() {
                const tbody = document.querySelector('.el-table__body-wrapper tbody')
                const _this = this
                Sortable.create(tbody, {
                    onEnd({ newIndex, oldIndex }) {
                        const currRow = _this.tableData.splice(oldIndex, 1)[0];
                        _this.tableData.splice(newIndex, 0, currRow);
                    }
                })
            },
            //列拖拽
            columnDrop() {
                const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
                this.sortable = Sortable.create(wrapperTr, {
                    animation: 180,
                    delay: 0,
                    onEnd: evt => {
                        console.log(evt.oldIndex)
                        const oldItem = this.dropCol[evt.oldIndex]
                        this.dropCol.splice(evt.oldIndex, 1)
                        this.dropCol.splice(evt.newIndex, 0, oldItem)
                    }
                })
            },
            // 上移
            moveUp(index, row) {
                var that = this
                console.log('上移', index, row)
                if (index > 0) {
                    this.tableData[index].SequenceNumber = index
                    this.tableData[index-1].SequenceNumber = index+1
                    const upDate = that.tableData[index - 1]
                    that.tableData.splice(index - 1, 1)
                    that.tableData.splice(index, 0, upDate)
                } else {
                    alert('已经是第一条，不可上移')
                }
            },
            // 下移
            moveDown(index, row) {
                var that = this
                console.log('下移', index, row)
                if ((index + 1) === that.tableData.length) {
                    alert('已经是最后一条，不可下移')
                } else {
                    this.tableData[index].SequenceNumber = index+2
                    this.tableData[index+1].SequenceNumber = index+1
                    const downDate = that.tableData[index + 1]
                    that.tableData.splice(index + 1, 1)
                    that.tableData.splice(index, 0, downDate)
                }
            }
        }
    }
</script>

<style scoped>

</style>